<template>
    <el-select v-model="value" filterable remote clearable @focus="handleFocus" @change="handleChange"
        placeholder="请选择" :remote-method="remoteMethod" :loading="loading">
        <el-option v-for="item in options" :key="item.id" :label="computedLabel(item)" :value="item.id">
        </el-option>
    </el-select>
</template>

<script>
    import request from '@/utils/request'
    export default {
        data() {
            return {
                options: [],
                value: '',
                loading: false,
            }
        },
        props: {
            type:{
                type:String,
                default:'parent'
            }
        },
        computed:{
            computedLabel(){
                return item => {
                    return item.code + ' - ' + item.name + (item.specification && (' - ' + item.specification))
                }
            }
        },
        mounted(){
            const url = '/basicData/materials/edit'
            if(this.$route.path === url){
                this.handleCommonRequest({name:''}).then(()=>{
                    this.$emit('callInterface')
                })
            }
        },
        methods: {
            handleCommonRequest: async function(data){
                const url = '/base/p_other',method = 'post'
                this.loading = true
                const res = await request({url,method,data})
                if(res.code == 200){
                    this.options = res.data
                }
                this.loading = false
            },
            handleFocus() {
                this.value.length <= 0 && this.remoteMethod('')
            },
            remoteMethod(query) {
                this.handleCommonRequest({name:query})
            },
            reset(){
                this.value = ''
            },
            evaluation(id){
                this.value = id
                this.handleChange(id)
            },
            handleChange(id){
                const target = this.options.find(i => i.id == id)
                this.$emit('getSelectInfo',{type:this.type,target:target ?? {}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-select{
        width: 300px;
    }
</style>